<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <h1>用户登录 - Ajax异步实现</h1>
    <form id="frm">
        帐号：<input type="text" name="uname" id="uname" value="admin"/><br/>
        密码：<input type="text" name="upass" id="upass" value="123456"/><br/>
        <input type="button" value="登录" onclick="ajaxLogin()">
    </form>

    <h2 style="display: none" id="suc_msg">
        登录成功，欢迎<span id="user"></span>
    </h2>

    <h2 style="display: none" id="err_msg">
    </h2>

    <script>
        // 异步登录
        function ajaxLogin() {
            // 第一：创建 XMLHttpRequest 对象
            var req = new XMLHttpRequest();

            // 第二：初始化参数
            req.open("post","ajax_login.do",true);

            // 第三：设置请求头信息
            req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            // 第四：发送请求，并传递数据
            var name = document.getElementById("uname").value ;
            var pass = document.getElementById("upass").value ;
            var data = "uname=" + name +  "&upass=" + pass　;
            req.send(data);

            // 第五：设置回调函数 - 获取服务器响应的结果
            req.onreadystatechange = function () {
                // 完成响应且响应成功
                if(req.status==200 && req.readyState==4) {
                    // 获取响应回来的 JSON 字符串
                    var json = req.responseText ;

                    console.log(json)

                    // 把 JSON 字符串转换化为 JS 对象
                    var res = eval("(" + json + ")")

                    // 对响应对象进行逻辑判断
                    if(res.code==500) {
                        // 显示错误信息
                        document.getElementById("err_msg").innerText = res.msg ;
                        document.getElementById("err_msg").style.display = "block"

                        // 显示表单
                        document.getElementById("frm").style.display = "block"
                        // 隐藏成功信息
                        document.getElementById("suc_msg").style.display = "none"
                        return ;
                    }

                    // 错误信息隐藏
                    document.getElementById("err_msg").style.display = "none"
                    // 表单隐藏
                    document.getElementById("frm").style.display = "none"
                    // 显示成功信息
                    document.getElementById("suc_msg").style.display = "block"
                    // 显示登录成功的帐号
                    document.getElementById("user").innerText = res.data.username ;

                }
            }

        }







    </script>
</body>
</html>